/**
 * 底部导航栏相互跳转功能
 * 为所有页面的底部导航添加统一的跳转功能
 */

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
    initNavigation();
    // 添加页面进入动画
    animatePageEntry();
});

/**
 * 页面进入动画
 */
function animatePageEntry() {
    // 添加过渡动画类
    document.body.classList.add('page-transition-in');
    
    // 100ms后移除初始化类，触发过渡动画
    setTimeout(() => {
        document.body.classList.remove('page-transition-in');
        document.body.classList.add('page-visible');
    }, 100);
}

/**
 * 初始化底部导航栏
 */
function initNavigation() {
    // 获取当前页面的文件名
    const currentPath = window.location.pathname;
    const isIndexPage = currentPath.endsWith('/jwyz/') || currentPath.endsWith('/jwyz/index.html');
    
    // 获取底部导航栏
    const tabBar = document.querySelector('.tab-bar');
    if (!tabBar) return;
    
    // 添加样式到head
    addNavigationStyles();
    
    // 清除原有的点击事件（防止重复绑定）
    const tabItems = tabBar.querySelectorAll('.tab-item');
    tabItems.forEach(item => {
        // 移除原有的点击事件
        const clone = item.cloneNode(true);
        item.parentNode.replaceChild(clone, item);
    });
    
    // 重新获取底部导航项
    const newTabItems = tabBar.querySelectorAll('.tab-item');
    
    // 为每个导航项添加点击事件
    newTabItems.forEach((item, index) => {
        // 如果已经是链接元素(<a>)，不进行处理
        if (item.tagName.toLowerCase() === 'a') return;
        
        item.addEventListener('click', (e) => {
            // 如果当前已激活，不执行跳转
            if (item.classList.contains('active')) return;
            
            // 根据索引确定要跳转的页面
            let targetUrl;
            switch (index) {
                case 0: // 首页
                    targetUrl = isIndexPage ? '#' : '../index.html';
                    break;
                case 1: // 发现
                    targetUrl = isIndexPage ? 'pages/discover.html' : 'discover.html';
                    break;
                case 2: // 经纪人
                    targetUrl = isIndexPage ? 'pages/agents.html' : 'agents.html';
                    break;
                case 3: // 个人中心
                    targetUrl = isIndexPage ? 'pages/profile.html' : 'profile.html';
                    break;
                default:
                    return;
            }
            
            // 如果点击当前页面，不跳转
            if (targetUrl === '#') return;
            
            // 添加导航点击动效
            animateTabClick(item);

            // 添加页面退出动画，然后跳转
            animatePageTransition(() => {
                window.location.href = targetUrl;
            });
        });
        
        // 添加点击涟漪效果
        item.addEventListener('click', (e) => {
            createRippleEffect(e, item);
        });
        
        // 添加悬停动画效果
        item.addEventListener('mouseenter', () => {
            if (!item.classList.contains('active')) {
                item.classList.add('tab-hover');
            }
        });
        
        item.addEventListener('mouseleave', () => {
            item.classList.remove('tab-hover');
        });
    });
}

/**
 * 添加导航样式
 */
function addNavigationStyles() {
    // 检查是否已添加样式
    if (document.getElementById('nav-animation-styles')) return;
    
    // 创建style元素
    const style = document.createElement('style');
    style.id = 'nav-animation-styles';
    
    // 添加CSS规则
    style.textContent = `
        /* 页面过渡动画 */
        body {
            opacity: 1;
            transition: opacity 0.3s ease;
        }
        
        body.page-transition-out {
            opacity: 0;
        }
        
        body.page-transition-in {
            opacity: 0;
        }
        
        body.page-visible {
            opacity: 1;
        }
        
        /* 底部导航动画 */
        .tab-bar .tab-item {
            transition: transform 0.2s ease, opacity 0.2s ease;
            position: relative;
            overflow: hidden;
        }
        
        .tab-bar .tab-item.tab-hover {
            transform: translateY(-3px);
        }
        
        .tab-bar .tab-item.tab-click {
            transform: scale(0.95);
            opacity: 0.8;
        }
        
        /* 涟漪效果 */
        .ripple {
            position: absolute;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transform: scale(0);
            animation: rippleEffect 0.6s linear;
            pointer-events: none;
        }
        
        @keyframes rippleEffect {
            to {
                transform: scale(2);
                opacity: 0;
            }
        }
        
        /* 活跃状态指示器 */
        .tab-bar .tab-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 3px;
            background-color: var(--primary-color, #4a6fee);
            border-radius: 3px 3px 0 0;
            transform: translateX(-50%);
            animation: indicatorAppear 0.3s forwards;
        }
        
        @keyframes indicatorAppear {
            to {
                width: 60%;
            }
        }
        
        /* 图标缩放效果 */
        .tab-bar .tab-item i {
            transition: transform 0.2s ease;
        }
        
        .tab-bar .tab-item.active i {
            transform: scale(1.2);
        }
    `;
    
    // 添加到文档头部
    document.head.appendChild(style);
}

/**
 * 页面过渡动画
 * @param {Function} callback - 动画完成后的回调函数
 */
function animatePageTransition(callback) {
    // 添加退出动画
    document.body.classList.add('page-transition-out');
    
    // 动画完成后执行回调
    setTimeout(() => {
        if (typeof callback === 'function') {
            callback();
        }
    }, 300);
}

/**
 * 标签点击动画
 * @param {HTMLElement} element - 被点击的标签元素
 */
function animateTabClick(element) {
    // 添加点击效果
    element.classList.add('tab-click');
    
    // 移除其他标签的active类
    const tabBar = element.closest('.tab-bar');
    tabBar.querySelectorAll('.tab-item').forEach(item => {
        if (item !== element) {
            item.classList.remove('active');
        }
    });
    
    // 添加active类
    element.classList.add('active');
    
    // 移除点击效果
    setTimeout(() => {
        element.classList.remove('tab-click');
    }, 200);
}

/**
 * 创建涟漪效果
 * @param {Event} e - 点击事件
 * @param {HTMLElement} element - 添加效果的元素
 */
function createRippleEffect(e, element) {
    // 检查是否已存在涟漪元素
    const rippleElements = element.getElementsByClassName('ripple');
    for (let i = 0; i < rippleElements.length; i++) {
        rippleElements[i].remove();
    }
    
    // 创建涟漪元素
    const ripple = document.createElement('span');
    ripple.className = 'ripple';
    element.appendChild(ripple);
    
    // 获取点击位置
    const rect = element.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    // 设置涟漪元素的位置和尺寸
    const size = Math.max(rect.width, rect.height) * 2;
    ripple.style.width = ripple.style.height = `${size}px`;
    ripple.style.left = `${x - size / 2}px`;
    ripple.style.top = `${y - size / 2}px`;
    
    // 自动清除涟漪元素
    setTimeout(() => {
        ripple.remove();
    }, 600);
} 